<template>
  <div class="dialog">
    <el-form :inline="true" :model="params" class="demo-form-inline">
      <el-form-item label="账号">
        <el-input placeholder="请输入账号" v-model="params.name"></el-input>
      </el-form-item>
      <!-- <el-form-item label="是否销售">
        <el-select v-model="params.asPartner" style="width: 100%;">
            <el-option label="全部" value=""></el-option>
            <el-option label="否" :value="0"></el-option>
            <el-option label="是" :value="1"></el-option>
          </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="onSearch" style="margin-left: 100px">查询</el-button>
        <el-button type="primary" @click="onAdd" style="margin-left: 10px">添加用户</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border stripe style="width: 100%" v-loading="loading" size="small">
      <el-table-column prop="id" label="序号" align="center" width="90"> </el-table-column>
      <el-table-column prop="username" label="账号" align="center"></el-table-column>
      <!-- <el-table-column label="是否销售" align="center">
        <template slot-scope="scope">
          {{ scope.row.asPartner == 1 ? "是" : "否" }}
        </template>
      </el-table-column> -->
      <el-table-column prop="nickname" label="昵称" align="center"></el-table-column>
      <el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
      <el-table-column prop="isAdmin" label="是否管理员" align="center">
        <template slot-scope="scope">
          {{ scope.row.isAdmin == 1 ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column prop="shopId" label="所属门店" align="center"></el-table-column>
      <el-table-column prop="userGroupName" label="用户组" align="center"></el-table-column>
      <el-table-column prop="flag" label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.flag == 1" style="color: #67C23A;">正常</span>
          <span v-if="scope.row.flag == 0" style="color: #F56C6C;">锁定</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" width="160"></el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="onEdit(scope.row)">修改密码</el-button>
          <el-button type="text" size="mini" @click="onUpdateGroup(scope.row)">更改权限</el-button>
          <el-button type="text" v-if="scope.row.flag === 1" size="mini"
            @click="onModifyStatus(scope.row, true)">锁定</el-button>
          <el-button type="text" v-if="scope.row.flag === 0" size="mini"
            @click="onModifyStatus(scope.row, false)">解锁</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="float: left; margin-top: 20px">
      <div>
        <span style="
            padding-top: 10px;
            display: inline-block;
            vertical-align: middle;
            color: #606266;
            font-size: 14px;
          ">显示第{{ this.params.page }}页的{{ this.params.rows }}条记录，总共{{
            this.total
          }}条记录
        </span>
      </div>
    </div>
    <div class="block" style="float: right; margin-top: 20px">
      <el-pagination :current-page.sync="params.page" :page-sizes="[10, 20, 50, 100]" :page-size="params.rows" background
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>

    <el-dialog :visible.sync="editShopVisible" title="添加用户" width="80%" center>
      <el-form :model="data" ref="from" label-width="150px" :rules="rules">
        <el-form-item label="账号:" prop="username">
          <el-input v-model="data.username"></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input v-model="data.password"></el-input>
        </el-form-item>
        <el-form-item label="是否销售:">
          <el-select v-model="data.asPartner" style="width: 100%;">
            <el-option label="否" :value="0"></el-option>
            <el-option label="是" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="销售地址:" v-if="data.asPartner==1">
          <el-input v-model="data.partnerAddress"></el-input>
        </el-form-item>
        <el-form-item label="昵称:">
          <el-input v-model="data.nickname"></el-input>
        </el-form-item>
        <el-form-item label="联系电话:">
          <el-input v-model="data.phone"></el-input>
        </el-form-item>
        <el-form-item label="所属门店:">
          <el-select v-model="data.shopId" style="width: 100%;">
            <el-option label="无" :value="0"></el-option>
            <el-option v-for="item in shopList" :key="item.id" :label="item.shopName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户组:">
          <el-select v-model="data.userGroup" style="width: 100%;">
            <el-option label="无" :value="0"></el-option>
            <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editShopVisible = false">关 闭</el-button>
        <el-button type="primary" @click="handleEdit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="modifyVisible" title="提示" width="450px" center>
      <div class="del-dialog-cnt">确定修改用户状态？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleModifyStatus">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="editPasswordVisible" title="修改密码" width="800px" center>
      <el-form :model="passwordData" ref="passwordForm" label-width="150px" :rules="passwordRules">
        <el-form-item label="旧密码:" prop="oldPassword">
          <el-input v-model="passwordData.oldPassword"></el-input>
        </el-form-item>
        <el-form-item label="新密码:" prop="newPassword">
          <el-input v-model="passwordData.newPassword"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editPasswordVisible = false">关 闭</el-button>
        <el-button type="primary" @click="handleEditPassword">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="editGroupVisible" title="更改用户组" width="800px" center>
      <el-form :model="groupData" ref="groupForm" label-width="150px">
        <el-form-item label="用户组:">
          <el-select v-model="groupData.groupId">
            <el-option label="无" :value="0"></el-option>
            <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editGroupVisible = false">关 闭</el-button>
        <el-button type="primary" @click="handleEditGroup">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import {
  getUserList, editUser, editUserPassword, lockUser, updateUserGroup, getGroupList
} from "@/api/user";
import {
  getShopList
} from "@/api/carSource";
import md5 from 'js-md5'
export default {
  data() {
    return {
      loading: false,
      currentPage4: 4,
      total: 0,
      params: {
        name: '',
        asPartner:''
      },
      shopList: [],
      tableData: [],
      groupList: [],
      editShopVisible: false,
      modifyVisible: false,
      editPasswordVisible: false,
      editGroupVisible: false,
      data: {
        id: 0,
        asPartner: 0,
        partnerAddress:'',
        username: '',
        nickname: '',
        password: '',
        phone: '',
        shopId: 0,
        userGroup: 0,
        flag: 1,
        locked: false
      },
      passwordData: {
        newPassword: '',
        oldPassword: ''
      },
      groupData:{
        groupId:0,
        userId:0
      },
      rules: {
        username: [
          { required: true, message: '请输入登录账号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' }
        ]
      },
      passwordRules: {
        newPassword: [
          { required: true, message: '请输入新的密码', trigger: 'blur' },
        ],
        oldPassword: [
          { required: true, message: '请输入原始密码', trigger: 'blur' }
        ]
      }
    };
  },

  methods: {
    onSearch() {
      this.getData();
    },
    handleSizeChange(val) {
      this.params.rows = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.getData();
    },
    getShopList() {
      let params = {
        pageSize: 1000,
        pageNo: 1,
      }
      getShopList(params).then((res) => {
        this.shopList = res.data.rows
      });
    },
    getData(exportExcel) {
      if (exportExcel) {
        this.params.export = true
      } else {
        this.loading = true;
        this.params.export = false
        let params = {
          pageSize: this.params.rows,
          pageNo: this.params.page,
          // orderType: 'desc',
          // orderField: 'createTime',
          filter: [{
            field: 'username',
            operator: 'LIKE',
            value: this.params.name
          }]
        }
        // if(this.params.asPartner!=''){
        //   params.filter.push({
        //     field: 'asPartner',
        //     operator: 'EQ',
        //     value: this.params.asPartner
        //   })
        // }
        getUserList(params).then((res) => {
          this.loading = false;
          this.total = res.data.total;
          this.tableData = res.data.rows;
        });
      }
    },
    onExport() {
      this.getData(true)
    },
    onEdit(row) {
      this.passwordData = {
        newPassword: '',
        oldPassword: ''
      }
      this.editPasswordVisible = true;
      this.data = row;
    },
    handleEdit() {
      this.$refs['from'].validate((valid) => {
        if (valid) {
          editUser(this.data).then((res) => {
            this.getData();
            this.editShopVisible = false;
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleEditGroup() {
      updateUserGroup(this.groupData.userId,this.groupData.groupId).then((res) => {
        this.getData();
        this.editGroupVisible = false;
      });
    },
    handleEditPassword() {
      this.$refs['passwordForm'].validate((valid) => {
        if (valid) {
          editUserPassword(this.data.id, this.passwordData.oldPassword, this.passwordData.newPassword).then((res) => {
            this.getData();
            this.editPasswordVisible = false;
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    onUpdateGroup(row) {
      this.groupData = {
        userId:row.id,
        groupId:row.userGroup
      }
      this.editGroupVisible = true;
    },
    onModifyStatus(row, flag) {
      this.modifyVisible = true;
      this.data.id = row.id;
      this.data.locked = flag;
    },
    handleModifyStatus() {
      lockUser(this.data.id, this.data.locked).then((res) => {
        this.getData();
        this.modifyVisible = false;
      });
    },
    onAdd() {
      this.resetForm();
      this.editShopVisible = true;
    },
    resetForm() {
      this.data = {
        id: 0,
        asPartner: 0,
        partnerAddress:'',
        username: '',
        nickname: '',
        password: '',
        phone: '',
        shopId: 0,
        userGroup: 0,
        flag: 1,
        locked: false
      }
    }
  },
  mounted() {
    this.getData();
    this.getShopList();
    let params = {
      pageSize: 1000,
      pageNo: 1,
    }
    getGroupList(params).then((res) => {
      this.groupList = res.data.rows
    });
  },
};
</script>
<style scoped lang="scss">
.my-radio {
  margin-bottom: 10px;
}

.dialog {
  width: 95%;
  height: 100%;
  padding-top: 30px;
  margin-left: 60px;
}
</style>
